<template>
  <u-tabbar :value="activeIndex" fixed :border="false"  >
    <u-tabbar-item
      v-for="(item, index) in tabList"
      :text="item.text"
      :key="index"
      :border="false"
      :icon="item.icon"
      :dot="item.dot"

      @click="tabBarChange(item.pagePath, index)"
    >
    </u-tabbar-item>
  </u-tabbar>
</template>

<script setup lang="ts">
import useIMStore from '@/store/modules/im';

const imStore = useIMStore();
const msgDot = computed(() => {
  return imStore.getMineMessageCount() > 0;
});
const tabList = ref([
  {
    pagePath: '/pages/home/home',
    text: '首页',
    icon: 'home',
    dot: false
  },
  {
    pagePath: '/pages/work/index',
    text: '工作台',
    icon: 'grid',
    dot: false
  },
  {
    pagePath: '/pages/mine/index',
    text: '我的',
    icon: 'account',
    dot: msgDot
  }
]);

const activeIndex = ref(0); //当前选中项
onLoad(() => {
  uni.hideTabBar();
  activeIndex.value=tabList.value.findIndex(item =>item.pagePath === uni.$u.page()) | 0
});

const tabBarChange = (url: string, index: number) => {
  tab.switchTab(url);
};
</script>

<style scoped lang="scss"></style>
